<template>
  <div class="top-status-bar">
    <h1>
      <span>智能运维平台</span>
    </h1>
    <nav>
      <ul>
        <li>实时监控</li>
        <li class="active">智能运维</li>
        <li>风险预警</li>
        <li>操作处置</li>
        <li><i class="fas fa-user-circle"></i> 退出登录</li>
      </ul>
    </nav>
  </div>
</template>

<script setup lang="ts">
// 顶部状态栏是纯展示组件，不涉及前后端分离，因此这里不需要太多逻辑
// 如果未来需要实现点击事件或用户状态显示，可以在这里添加 props 或简单的事件处理
</script>

<style scoped>
/* 迁移自原 HTML 的 .top-status-bar 及其子元素样式 */
.top-status-bar {
  background-color: #3f51b5; /* */
  color: white; /* */
  padding: 10px 20px; /* */
  display: flex; /* */
  justify-content: space-between; /* */
  align-items: center; /* */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* */
  z-index: 1000; /* */
}

.top-status-bar h1 {
  margin: 0; /* */
  font-size: 1.2em; /* */
  display: flex; /* */
  align-items: center; /* */
}

.top-status-bar h1 img {
  height: 24px; /* */
  margin-right: 10px; /* */
}

.top-status-bar nav ul {
  list-style: none; /* */
  margin: 0; /* */
  padding: 0; /* */
  display: flex; /* */
}

.top-status-bar nav ul li {
  margin-left: 25px; /* */
  cursor: pointer; /* */
  font-size: 0.95em; /* */
  padding: 5px 0; /* */
  position: relative; /* */
}

.top-status-bar nav ul li::after {
  content: ''; /* */
  position: absolute; /* */
  width: 0; /* */
  height: 2px; /* */
  bottom: -5px; /* */
  left: 50%; /* */
  background-color: white; /* */
  transition: all 0.3s ease-in-out; /* */
  transform: translateX(-50%); /* */
}

.top-status-bar nav ul li:hover::after,
.top-status-bar nav ul li.active::after {
  width: 100%; /* */
}
</style>